{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"车辆管理",back:1} %}
    <mu-tabs :value.sync="tab" color="amber600" indicator-color="amber600" inverse center>
        <mu-tab>所有车辆</mu-tab>
        <mu-tab>录入/编辑车辆</mu-tab>
    </mu-tabs>
    <div class="pad10" v-if="tab == 1">
        <mu-form  ref="form" :model="en" label-position="top" label-width="100">
            <div class="fs10 padl5 padr5">
                <mu-form-item label="车牌号" :rules="[rules.notNull]" prop="number">
                    <mu-text-field v-model="en.number"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="行驶证编号" :rules="[rules.notNull]" prop="cardNum">
                    <mu-text-field v-model="en.cardNum"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="发动机编号" :rules="[rules.notNull]" prop="engineNum">
                    <mu-text-field v-model="en.engineNum"></mu-text-field>
                </mu-form-item>
                <mu-form-item label="发证日期" :rules="[rules.notNull]" prop="checkDate">
                    <mu-date-input v-model="en.checkDate" no-display></mu-date-input>
                </mu-form-item>
                <mu-form-item label="下次年审" :rules="[rules.notNull]" prop="checkStatus">
                    <mu-date-input v-model="en.checkStatus"  no-display></mu-date-input>
                </mu-form-item>
                <mu-form-item label="负责人" :rules="[rules.notNull]" prop="manager">
                    <mu-text-field v-model="en.manager"></mu-text-field>
                </mu-form-item>
                <div class="fs10 padl5 padr5 flr">
                    <mu-form-item label="图片信息" :rules="[rules.notNull]" prop="pics">
                        <div class="ofh">
                            <div class="flex-r flex-nowrap">
                                <mu-paper class="picCommonSize pos-r mar3" :z-depth="1"  v-for="tile, index in pics">
                                    <img class="picCommonSize" :src="tile">
                                    <div class="pos-a w100 r0 l0 b-3 flrc op6">
                                        <mu-button fab small color="black" @click="move(index,-1)">
                                            <mu-icon  value="arrow_back"></mu-icon>
                                        </mu-button>
                                        <mu-button fab small color="black" @click="move(index,1)">
                                            <mu-icon  value="arrow_forward"></mu-icon>
                                        </mu-button>
                                        <mu-button fab small color="black" @click="delPic(index)">
                                            <mu-icon  value="close"></mu-icon>
                                        </mu-button>
                                    </div>
                                </mu-paper>
                            </div>

                            <div class="">
                                <mu-button color="success" @click="selectPic()">选择图片</mu-button>
                            </div>
                        </div>
                    </mu-form-item>
                </div>
                <div class="fs8 c11 pad5 mart10">
                    <mu-button large full-width round color="primary" @click="submit()">保存提交</mu-button>
                </div>
            </div>
        </mu-form>
    </div>
    <div class="pad10" v-if="tab == 0">
        <div class="fs8 c11">
            <mu-ripple class="bcf padb5 round5 mart5  bdc12 pos-r" v-for="item,index in list"  @click="select(index)">
                <div class="flrc padl5 padr5 c11">
                    {#<div class="">车牌号：</div>#}
                    <div class="flex1 fs24">[[item.Car_number]]</div>
                    <div class="c2 fs14" >
                        <mu-button icon v-if="now < item.Car_check_Status"><mu-icon color="success" value="check_circle"></mu-icon></mu-button>
                        <mu-button icon v-if="now >= item.Car_check_Status"><mu-icon color="red500" value="assignment_late"></mu-icon></mu-button>
                    </div>
                </div>
                <div class="flrc pad5 c12">
                    <div class="">行驶证编号：</div><div class="flex1">[[item.Car_card_Num]]</div>
                </div>
                <div class="flrc padl5 padr5 padb5 c12">
                    <div class="">发动机编号：</div><div class="flex1">[[item.Car_engine_Num]]</div>

                </div>
                <div class="bdtso pad5 flrc bcf">
                    <div class="">发证日期：</div>
                    <div class="flex1">[[item.Car_check_Date]]</div>
                    <div class="">下次年审：</div>
                    <div class="flex1">[[item.Car_check_Status]]</div>
                </div>
            </mu-ripple>
        </div>
    </div>


    <mu-bottom-sheet :open.sync="open">
        <mu-list @item-click="">
            <mu-sub-header>请选择操作</mu-sub-header>
            <mu-list-item button @click="edit(index)">
                <mu-list-item-action>
                    <mu-icon value="edit" color="green"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>编辑</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button @click="del(index)">
                <mu-list-item-action>
                    <mu-icon value="delete_forever" color="blue"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>删除</mu-list-item-title>
            </mu-list-item>
            <mu-list-item button @click="cancel">
                <mu-list-item-action>
                    <mu-icon value="power_settings_new" color="orange"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>取消</mu-list-item-title>
            </mu-list-item>
        </mu-list>
    </mu-bottom-sheet>
{% endblock %}

    {% block myJs %}

        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/crypto/crypto.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/hmac/hmac.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/crypto1/sha1/sha1.js"></script>
        <script type="text/javascript" src="{{ root }}/assets/oss/lib/base64.js"></script>
        {#<script type="text/javascript" src="{{ root }}/assets/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>#}
        <script type="text/javascript" src="{{ root }}/assets/oss/uploadMy.js{{ rnd }}"></script>
    {% endblock %}
